<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  引入初始化样式-->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入本页面样式 -->
    <link rel="stylesheet" href="./css/login.css">
    <!--  引入jquery文件-->
    <script src="./js/jquery.min.js"></script>
    <!-- 引入rem js文件 -->
    <script src="./js/flexible.js"></script>
    <!-- 引入本页面js文件 -->
    <script src="./js/login.js"></script>
</head>

<body>
    <div class="maxBox">
        <div class="mainBox">
            <img src="./images/login2.webp" alt="" class="imgFl">
            <div class="boxFr">
                <div class="frTop">
                    <img src="./images/login3.webp" alt="" class="rangCha">
                    <div class="topText">
                        <p>演示用户名：admin</p>
                        <p>密码： 123456</p>
                    </div>
                </div>
                <!-- 登录 -->
                <form action="" class="loginForm">
                    <p class="emailText"></p>
                    <input type="text" name="" placeholder="用户名/邮箱" class="fill inp user">
                    <p class="reminder reminderUser">请提供您在注册过程中提供的电子邮件或用户名。</p>
                    <input type="text" name="" placeholder="密码" class="fill inp password">
                    <p class="reminder reminderPwd">请输入密码。</p>
                    <div>
                        <input type="checkbox" name="" id="checks" class="checkBox checkBox1"><label
                            for="checks">记住我（请在私人设备上使用此功能）</label>
                    </div>
                    <input type="button" value="立即登录" class="loginBtn immeLogin inp">
                    <input type="button" value="马上注册" class="regisBtn toggleBtn inp">
                    <p class="forgetText">忘记密码？点这里找回</p>
                </form>
                <!-- 注册 -->
                <form action="" class="registerForm">
                    <input type="text" name="" placeholder="用户名" class="fill registerinp inp">
                    <input type="text" name="" placeholder="邮箱" class="fill registerinp inp">
                    <input type="text" name="" placeholder="密码" class="fill registerinp inp">
                    <input type="text" name="" placeholder="再输一次密码" class="fill registerinp inp">
                    <div>
                        <input type="checkbox" name="" id="check" class="checkBox regisCheck"><label
                            for="check">我同意《用户手册》和《保密条款》</label>
                    </div>
                    <input type="button" value="马上注册" class="loginBtn registerBtn inp">
                    <input type="button" value="登录" class="regisBtn toggleBtn inp">
                </form>
                <!-- 忘记密码 -->
                <form action="" class="forgetForm">
                    <p class="formText">填写完下面的信息之后，请点击发送按钮。我们会向您的注册邮箱发送一封邮件。邮件里有验证码。如果您不能访问邮箱，请联系我们的客服。</p>
                    <p class="inpTop">用户名或密码</p>
                    <input type="text" name="" placeholder="密码" class="fill inp">
                    <p class="inpTop">请回答问题：</p>
                    <p class="issue">请回答:
                        <span class="random" data-num="1"></span> +
                        <span class="random" data-num="2"></span> 等于几?
                    </p>
                    <input type="text" name="" placeholder="再输一次密码" class="fill inp">
                    <input type="button" value="发送" class="loginBtn inp">
                    <input type="button" value="更改您的密码" class="regisBtn forGetBtn inp">
                </form>
                <!-- 更改密码 -->
                <form action="" class="changeForm">
                    <p class="inpTop">您的验证码</p>
                    <input type="text" name="" class="fill inp">
                    <p class="yard">
                        为了安全考虑，您需要一个验证码才能更改密码。如果没有验证码，
                        <span class="forGetBtn">请点击这里。</span>
                    </p>
                    <p class="inpTop">密码<span class="helpBox">
                            <span class="hint">密码至少8位</span></span></p>
                    <input type="text" name="" class="fill inp">
                    <p class="inpTop interval">请再输一次密码</p>
                    <input type="text" name="" class="fill inp">
                    <p class="inpTop interval">密码强度</p>
                    <div class="strenghBox"></div>
                    <p class="inpTop interval">请回答问题：</p>
                    <p class="issue">请回答: <span class="random">4</span> + <span class="random">6</span> 等于几?</p>
                    <input type="text" name="" class="fill inp">
                    <input type="button" value="更改密码" class="loginBtn inp">
                    <input type="button" value="重新发送验证码" class="regisBtn forGetBtn inp">
                </form>
            </div>
        </div>
    </div>
</body>

</html>